<template>
  <div class="questions-preview">
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="60%"
      :before-close="closeVisible"
    >
      <!-- 题型 -->
      <el-row>
        <el-col :span="6">
          【题型】：
          <span v-if="questionItem.questionType === '1'">单选题</span>
          <span v-if="questionItem.questionType === '2'">多选题</span>
          <span v-if="questionItem.questionType === '3'">简答题</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{ questionItem.id }}</span>
        </el-col>
        <el-col :span="6">
          【难度】：
          <span v-if="questionItem.difficulty === '1'">简单</span>
          <span v-if="questionItem.difficulty === '2'">一般</span>
          <span v-if="questionItem.difficulty === '3'">困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】 : {{ questionItem.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="rubric">
        <el-col :span="6">
          <span>【学科】 : {{ questionItem.subject }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】 : {{ questionItem.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】 : {{ questionItem.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <el-row class="rubric">
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row class="rubric">
        <el-col style="color: blue">
          <div v-html="questionItem.question"></div>
        </el-col>
      </el-row>
      <el-row class="rubric">
        <el-col>
          <span>
            <span v-if="questionItem.questionType === '1'">单选题</span>
            <span v-else-if="questionItem.questionType === '2'">多选题</span>
            <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
          </span>
        </el-col>
      </el-row>
      <!-- 单选框  questionType === '1'才显示-->
      <!-- data中的数据 radio: 1  由于单选框只有一个isRight 判断相等 按钮选中-->
      <el-radio-group
        v-model="radio"
        v-if="questionItem.questionType === '1'"
        @change="change"
      >
        <!-- 循环遍历按钮 -->
        <el-row
          v-for="item in questionItem.options"
          :key="item.id"
          style="margin: 10px 0px"
        >
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选框 -->
      <div v-if="questionItem.questionType === '2'">
        <el-row v-for="item in options" :key="item.id" style="margin: 10px 0px">
          <el-checkbox
            v-model="item.isRight"
            :disabled="item.isRight === 0"
            @change="checkboxChange(item)"
          >
            {{ item.title }}
          </el-checkbox>
        </el-row>
      </div>
      <hr />
      <el-row class="rubric text">
        <span
          >【参考答案】 :
          <el-button type="danger" @click="isVideoShow = true"
            >视频答案预览</el-button
          >
        </span>
      </el-row>
      <el-row style="margin-top: 20px" v-if="isVideoShow">
        <video
          :src="questionItem.videoURL"
          controls="controls"
          class="video"
        ></video>
      </el-row>
      <el-row class="rubric text" style="display: flex">
        <span>【答案解析】 : </span>
        <span
          class="span1"
          v-html="questionItem.answer === '' ? '无' : questionItem.answer"
        >
        </span>
      </el-row>

      <hr />
      <el-row class="rubric text">
        <span>【题目备注】 : </span>
        <p class="p2">{{ questionItem.remarks || "无" }}</p>
      </el-row>
      <el-row class="footer">
        <el-button type="primary" @click="$emit('close')" class="closeBtn"
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      isVideoShow: false, // 视频显示状态
      radio: 1
    }
  },
  props: {
    dialogVisible: { type: Boolean, required: true },
    questionItem: {
      type: Object,
      required: true
    }
  },
  methods: {
    closeVisible () {
      this.$emit('update:dialogVisible', false)
    },
    // 单选框点击事件
    change () {
      this.radio = 1
    },
    // 多选框change事件 isRight:1为选中
    checkboxChange (item) {
      if (!item.isRight) {
        item.isRight = true
      }
    }
  },
  computed: {
    options () {
      // 先判断是不是多选题 2是多选
      if (this.questionItem.questionType === '2') {
        // 判断没有取反为true就停止执行
        if (!this.questionItem.options) {
          return // 如果没有题目选项停止后续操作
        }
        // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
        this.questionItem.options.forEach(item => {
          if (item.isRight === 1) {
            // 将这一项的isRight改为true 多选框就会默认选择
            item.isRight = true
          }
        })
        // 修改完成之后
        return this.questionItem.options
      } else {
        // 如果不是单选题 原路返回传递过来的题目项
        return this.questionItem.options
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.questions-preview {
  .rubric {
    display: flex;
    margin-bottom: 26px;
    .span1 {
      margin-top: -13px;
    }
    ::v-deep.p2 {
      margin-top: 1px;
    }
  }
  .text {
    margin-top: 20px;
  }

  .footer {
    display: flex;
    margin-top: 20px;
    .closeBtn {
      margin: 0 auto;
    }
  }

  .video {
    width: 400px;
  }
}
</style>
